<template>
    <div class="task-blood" v-loading="loading">
        <div class="blood-left" :style="fullScreen ? 'width:100%' : ''">
            <blood-chart v-if="data.length" :fullScreenBtn="true" :isAll="isAll" :fullScreen="fullScreen" :data="data" @fullScreen="handleFullScreen" @item="changeIndex"></blood-chart>
            <nodata-box v-else></nodata-box>
        </div>
        <div class="blood-right" v-show="!fullScreen">
            <div class="blood-right-head">任务信息</div>
            <task-info v-if="item !== ''" :data="item"></task-info>
            <nodata-box v-else></nodata-box>
        </div>
    </div>
</template>
<script>
import NodataBox from '@/components/NodataBox'
import BloodChart from './BloodChart'
import TaskInfo from './TaskInfo'
import { changeWindowSize } from '@/js/tool'
import { mapGetters } from 'vuex'
export default {
    name: 'TaskBlood',
    components: {
        BloodChart,
        TaskInfo,
        NodataBox
    },
    computed: {
        ...mapGetters({
            projectId: 'common/getProjectId'
        })
    },
    props: {
        isAll: {
            type: Boolean,
            default: () => { return false }
        }
    },
    data () {
        return {
            item: '',
            loading: false,
            fullScreen: false,
            data: []
        }
    },
    created () {
        this.init()
    },
    methods: {
        changeIndex (item) {
            this.item = item
            console.warn(item, 'item')
            if (!this.fullScreen) {
                this.handleFullScreen(false)
            }
        },
        init () {
            this.loading = true
            const params = {
                projectId: this.projectId,
                experimentId: JSON.parse(localStorage.getItem('scheduleData')).experimentId
            }
            let url = ''
            if (this.isAll) {
                url = '/experiment/queryOfflineScheduleGraph'
                delete params.experimentId
            } else {
                url = '/experiment/queryOfflineScheduleSingleGraph'
            }
            this.$post(url, params).then(res => {
                if (res) {
                    this.data = this.getDispatchSchedule(res)
                }
            }).finally(() => {
                this.loading = false
            })
        },
        addZero (str) {
            return str < 10 ? `0${str}` : str
        },
        // 获得调度周期
        getDispatchSchedule (arr) {
            for (let i = 0; i < arr.length; i++) {
                let cronObj = JSON.parse(arr[i].cronObj)
                let schedulTimeStr = ''
                if (cronObj) {
                    cronObj.hourExp = cronObj.hourExp ? this.addZero(cronObj.hourExp) : ''
                    cronObj.minuteExp = cronObj.minuteExp ? this.addZero(cronObj.minuteExp) : ''
                    cronObj.secondExp = cronObj.secondExp ? this.addZero(cronObj.secondExp) : ''
                }
                switch (arr[i].periodType) {
                    case 5:
                        schedulTimeStr = `每月${cronObj.dayExp}号,${cronObj.hourExp}:${cronObj.minuteExp}:${cronObj.secondExp}`
                        break
                    case 3:
                        schedulTimeStr = `每${cronObj.dayExp}天,${cronObj.hourExp}:${cronObj.minuteExp}:${cronObj.secondExp}`
                        break
                    case 4:
                        schedulTimeStr = `星期${cronObj.weekExp},${cronObj.hourExp}:${cronObj.minuteExp}:${cronObj.secondExp}`
                        break
                    case 2:
                        schedulTimeStr = `${cronObj.hourExp}:${cronObj.minuteExp}:${cronObj.secondExp}`
                        break
                    case 1:
                        schedulTimeStr = `00:${cronObj.minuteExp}:${cronObj.secondExp}`
                        break
                }
                arr[i].schedulTimeStr = schedulTimeStr
            }
            return arr
        },
        handleFullScreen (val) {
            this.fullScreen = val
            this.$nextTick(() => {
                changeWindowSize()
            })
        }
    }
}
</script>
<style lang="less">
    .task-blood {
        height: 100%;
        display: flex;
        .blood-right {
            width: 400px;
            overflow-x: hidden;
            overflow-y: auto;
            border-left: 1px solid #DCDFE6;
        }
        .blood-left {
            width: calc(100% - 400px);
            overflow-x: hidden;
            overflow-y: auto;
        }
        .blood-right-head {
            text-align: center;
            font-size: 16px;
            font-weight: bold;
            color: #666;
        }
    }
</style>
